<script>
import SingleLine from './singleLine.vue'
import BarChart from './barChart.vue'
export default {
  name: 'GraphItem',
  components: {
    SingleLine,
    BarChart
  },
  props: {
    graphData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isShow: false,
      editData: {
        title: '',
        isShowInput: false
      }
    }
  },
  mounted () {
    this.isShow = true
  },
  watch: {
    graphData: {
      handler(value) {
        console.log(value);  
      },
      immediate: true,
      deep: true
    } 
  },
  inject: [
    'handleChildRemove', 
    'handleChildSubmit', 
    'handleDownExcel', 
    'handleResultExcel', 
    'handleToDetail',
    'isShowResultExcel',
  ],
  methods: {
    handleTitle(title) {
      this.editData.isShowInput = true
      this.editData.title = title
    },
    handleDeleted() {
      this.handleChildRemove(this.graphData)
    },
    handleEdit() {
      this.handleChildSubmit({
        id: this.graphData.id,
        editValue: this.editData.title
      })
      this.editData.isShowInput = false
    }
  }
}
</script>
<template>
  <div class="graph_item_module">
    <template v-if="isShow">
      <SingleLine v-if="graphData.typeString === 'aff'" :value="graphData.result_data"></SingleLine>
      <BarChart v-else-if="graphData.typeString === 'histogram'" :data="graphData.result_data"></BarChart>
      <img v-else-if="graphData.typeString === 'pisa'" v-lazy="graphData.result_data.img" alt="line" class="pisa_img" lazy />
      <div class="action_area">
        <div class="content_top">
          <div class="content_box">
            <span class="time">{{ graphData.uploadTime }}</span>
            <span class="accout">{{ graphData.userName }}</span>
          </div>
          <div class="action_icon">
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <a-icon type="download" :style="{fontSize: '20px', color: '#3998da'}"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item key="3" @click="handleDownExcel(graphData)">
                  {{ $t('page.download') }}
                </a-menu-item>
                <a-menu-item 
                  v-if="!isShowResultExcel"
                  key="4" @click="handleResultExcel(graphData)">
                  {{ $t('page.export') }}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <a-icon
              @click="handleDeleted"
              type="delete" 
              :style="{
                cursor: 'pointer',
                fontSize: '20px', 
                color: '#f5222d',
                marginLeft: '20px'
              }"
            />
          </div>
        </div>
        <div class="fileName" v-if="!editData.isShowInput" >
          <h2 
            class="content_title" 
            @dblclick="handleTitle(graphData.fileName)"
          >{{ graphData.fileName }}</h2>
          <a-button type="link" size="large" @click="handleToDetail(graphData)">
            <span class="btn_txt">
              详情 
              <a-icon 
                type="arrow-right" 
                class="icon_right"
              /></span>
          </a-button>
        </div>
        <div class="edit_content" v-else>
          <a-input v-model="editData.title"/>
          <span @click="handleEdit">确定</span>
          <span @click="editData.isShowInput = false">取消</span>
        </div>
      </div>
    </template>
  </div>
</template>
<style lang="scss" scoped>
.graph_item_module {
  width: auto;
  // height: 100%;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  .pisa_img {
    width: 100%;
    height: 360px;
    object-fit: contain;
  }
  .action_area {
    width: 100%;
    height: auto;
    background-color: #f2f2f2;
    padding: 6px 20px;
    .content_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .content_box {
        display: flex;
        flex-direction: column;
        .time {
          font-size: 16px;
          font-weight: bold;
        }
        .accout {
          color: #999;
        }
      }
    }
    .fileName {
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      align-items: center;
      ::v-deep {
        .ant-btn-lg {
          padding: 0 0 0 15px;
        }
        .ant-btn-link {
          transform: translateX(16px);
          transition-duration: 400ms;
        }
        .ant-btn-link:hover {
          transform: translateX(-4px);
        }
      }
    }
    .content_title {
      font-weight: bold;
      cursor: pointer;
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
      white-space: nowrap;
      font-size: 16px !important;
      margin-bottom: 0;
    }
    .edit_content {
      display: flex;
      align-items: center;
      span {
        white-space: nowrap;
        margin-left: 15px;
        color: #3998da;
        cursor: pointer;
        font-weight: bold;
        font-size: 18px;
      }
      span:hover {
        opacity: 0.5;
      }
    }
  }
}
</style>